<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定义图层-SVG</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=52a208e99a6c24ab60208167d15cb5db&plugin=Map3D,AMap.DistrictSearch,AMap.MouseTool"></script>
<script>

    var starCenter = [108.19848536074164, 34.241771035259845]
    var map = new AMap.Map('container', {
        center: starCenter,
        zoom: 14,
    });

    map.plugin(['AMap.CustomLayer'], function () {
        var size = map.getSize();
        var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        canvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        canvas.setAttribute('width', size.width);
        canvas.setAttribute('height', size.height);

        path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.onclick = function () {
            //console.log('svg path clicked')
        }
        var styleText = [];
        styleText.push('stroke:#132235');
        styleText.push('fill:#132235');
        styleText.push('fill-opacity:0.6');
        path.style.cssText = styleText.join(';');

        canvas.appendChild(path)
        var customLayer = new AMap.CustomLayer(canvas, {
            // zooms: [3, 8],
            alwaysRender:true,
            zIndex: 100
        });
        customLayer.render = onRender;
        map.add(customLayer)
    });

    function buildPath() {
        var path = [];
        var center = map.lngLatToContainer(starCenter)
        for (let k = 0; k < 6; k += 1) {
            var ag = Math.PI * 60 / 180 * k
            var x = center.x + Math.cos(ag) * 5000000
            var y = center.y + Math.sin(ag) * 5000000
            path.push((k == 0 ? 'M' : 'L') + x + ' ' + y);
        }
        return path.join(' ') + ' Z';
    }

    function onRender() { //更新路径
        var newPath = buildPath();
        path.setAttribute('d', newPath);
    }
</script>
</body>
</html>